<!DOCTYPE html>
<html>
<head>
    <%include("/back/_include/meta.html",{"title":""}){}%>
    <%include("/back/_include/style.html"){}%>
    <link href="/assets/ui/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-content">
                    <div id="toolbar">
                        <div class="btn-group">
                            <button class="btn btn-primary" id="add">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                            <button class="btn btn-danger" id="trash">
                                <i class="glyphicon glyphicon-trash"></i>
                            </button>
                        </div>
                    </div>
                    <table id="table"
                           data-classes="table table-hover table-condensed"
                           data-sort-name="gmtCreate"
                           data-sort-order="asc"
                           data-show-columns="true"
                           data-height="700"
                           data-search="true"
                           data-show-refresh="true"
                           data-show-toggle="true"
                           data-toolbar="#toolbar"
                    ></table>
                </div>
            </div>
        </div>
    </div>
</div>
<%include("/back/_include/script.html"){}%>
<script src="/assets/ui/h+/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/ui/h+/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $table = $('#table').bootstrapTable({
            url: '/b/group/page',
            pagination: true,
            sidePagination: 'server',
            pageList:[5,10,20,50],
            queryParams: function (params) {
                return params;
            },
            columns: [
                {
                    field: 'id', title: '编号', checkbox: true,formatter:function (value,row,index) {
                        return "<span class='hide'>"+value+"</span>"
                    }
                }, {
                    title: '名称',
                    field: 'name',
                    sortable: true
                }, {
                    title: '创建时间',
                    field: 'gmtCreate',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return timestampToDate(value)
                    }
                }, {
                    title: '修改时间',
                    field: 'gmtModified',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return timestampToDate(value)
                    }
                },{
                    title: '操作',
                    formatter: function (value, row, index) {
                        var id = row.pkvalueList[0];
                        return [
                            '<div class="btn-group">\
                                <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" aria-expanded="false">操作\
                                    <span class="caret"></span>\
                                </button>\
                                <ul class="dropdown-menu" data-id="'+id+'">\
                                    <li>\
                                        <a href="#" class="edit text-warning">修改</a>\
                                    </li>\
                                    <li class="divider"></li>\
                                    <li>\
                                        <a href="#" class="delete font-bold">删除</a>\
                                    </li>\
                                </ul>\
                            </div>',
                            '<button type="button" data-id="'+id+'" class="role btn btn-sm btn-info">角色列表</button>',
                        ].join(' ');
                    }
                }
            ]
        });
        $(document).on("click",'#trash',function () {
            var result = $table.bootstrapTable('getSelections');
            var ids = "";
            for (var i = 0; i < result.length; i++) {
                var item = result[i];
                ids+=item.pkvalueList[0]+",";
            }
            if(isEmpty(ids)){
                error("请选择要删除的记录")
                return
            }
            confirm2("删除后不可恢复!",function () {
                get("/b/group/delete?ids="+ids,function (res) {
                    if(!res.success){
                        error(res.msg)
                        return;
                    }
                    var index = success("删除成功",false,function () {
                        $('[name="refresh"]').trigger("click")
                        layer.close(index)
                    })
                },function () {
                    systemErr();
                })
            })
        });
        $(document).on("click",'#add',function () {
            layer.open({
                type: 2,
                title: '新增分组',
                shadeClose: true,
                shade: 0.2,
                area: ['780px', '90%'],
                content: '/b/group/add'
            });
        })
        //编辑
        $(document).on("click",'.edit',function () {
            layer.open({
                type: 2,
                title: '编辑分组',
                shadeClose: true,
                shade: 0.2,
                area: ['780px', '90%'],
                content: '/b/group/edit?id='+$(this).parents("ul").data("id")
            });
        })
        $(document).on("click",'.role',function () {
            ajaxHtml("/b/role/select?groupId="+$(this).data("id"),function(res){
                if(res.success===false){
                    error("加载设置角色页面失败")
                    return;
                }
                configModal("#modal", "设置分组角色", res);
                $('#modal_btn').trigger("click");
            });
        })
    });
</script>
</body>
</html>
